<template>
  <div>
    <div class="header" id="header">
      <router-link to="/percen">
        <div class="header_back">
          <div class="header_back_r"></div>
        </div>
      </router-link>
      <div id="head-title">我的收藏</div>
      <router-link to="/" class="gb-head-rightwrap" data-ajax="false">
        <div class="header_right">
          <img
            src=""
          />
        </div>
      </router-link>
    </div>
    <div>
      <van-card
        v-for="(item, index) in list"
        :key="index"
        num="1"
        :price="item.price"
        :desc="item.name"
        :title="`商品ID：` + item.id"
        :thumb="item.picurl[0]"
      >
        <template #tags>
          <van-tag plain type="danger">{{ item.clientname }}</van-tag>
        </template>
        <template #footer>
          <van-button size="mini" @click="handledel(index)">删除</van-button>
          <van-button size="mini" @click="handlebuy(index)">购买</van-button>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  computed: {
    list() {
      return this.$store.state.percen.orderlist;
    },
    i() {
      return this.$store.state.percen.i;
    },
    name() {
      return this.$store.state.percen.user;
    },
  },
  methods: {
    handledel(index) {
      this.$store.commit("percen/delone", index);
    },
    handlebuy(index) {
      let { name, i, list } = this;
      console.log(name.money)
      if (name.money - list[index].price>=0) {
        Dialog.confirm({
          title: "支付成功",
        });
        this.$store.commit("percen/add", index);
        this.handledel(index);
      }else{
        this.$router.push('/money')
      }
    },
  },
};
</script>

// <style lang="less" scoped>
.van-card {
  position: relative;
  box-sizing: border-box;
  padding: 8px 16px;
  color: #323233;
  font-size: 12px;
  background-color: #fafafa;
  margin-top: 60px;
}
.van-card__thumb {
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  width: 90px;
  height: 88px;
  margin-right: 22px;
}
</style>